<div>
<p class="text-center text-muted">用户注册</p>
<!--表单开始-->
<form  class="form-horizontal" role="form">
	<!--用户名-->
	<div class="form-group">
		<label for="username" class="col-md-3 control-label">用户名字：</label>
		<div class="col-md-5">
			<input type="text" class="form-control" id="username" placeholder="请输入用户名">
		</div>
		<div class="col-md-4" style="color: red; font-size: 10px; word-break: break-all;">

		</div>
	</div>
	<!--密码-->
	<div class="form-group">
		<label for="pass_first" class="col-md-3 control-label">密码：</label>
		<div class="col-md-5">
			<input type="password"  class="form-control" id="pass_first" placeholder="请输入密码">
		</div>
		<div class="col-md-4" style="color: red;  font-size: 10px; word-break: break-all;">

		</div>
	</div>
	<!--密码-->
	<div class="form-group">
		<label for="pass_second" class="col-md-3 control-label">验证密码：</label>
		<div class="col-md-5">
			<input  type="password" class="form-control" id="pass_second" placeholder="请验证密码">
		</div>
		<div class="col-md-4" style="color: red; font-size: 10px;  word-break: break-all;">

		</div>
	</div>
	<div class="form-group">
		<label for="email" class="col-md-3 control-label">邮箱：</label>
		<div class="col-md-5">
			<input type="email" class="form-control" id="email" placeholder="输入邮箱地址">
		</div>
		<div class="col-md-4" style="color: red; font-size: 10px; word-break: break-all;">

		</div>
	</div>
	<div class="form-group">
		<label for="email" class="col-md-3 control-label">邮箱验证：</label>

		<div class="col-md-4">
			<input type="text" class="form-control" id="yzm" placeholder="输入邮箱验证码">
		</div>
		<div class="col-md-5 pull-right">
			 <input type="button"  class="btn text-success" id="verify_refresh"  value="获取验证码">
		</div>

	</div>
	<!--提交按钮-->
	<div class="form-group">
		<label class="col-md-3 control-label"></label>
		<div class="col-md-5">
			<input id="btn-login" type="button" class="btn btn-primary text-left" value="注册" />
			<input id="btn_reset" style="margin-left: 15px;" type="reset" class="btn btn-info text-right" value="RESET" />
		</div>
		<div class="col-md-offset-1 col-md-2" style="margin-top: 9px;">
			<a href="/login"> BACK
				<span class="glyphicon glyphicon-arrow-right text-right" aria-hidden="true"></span>
			</a>
		</div>
	</div>
</form>
</div>
<script type="application/javascript">
	$(function () {
		$("#btn-login").on("click",btnLogin);
		$(".loginDiv").css('height',"325px");
		$(".loginDiv").css("top","130px")
		allfunction();
		function  allfunction() {

			usernameblur();
			usernamefocus();
			passwordsecondblur();
			passwordsec_firfocus()
			sendMail();
			sendmailfocus();
		}
		function usernameblur() {
			$("#username").blur(function () {
				// alert("1111");
				if ($(this).val()==='') {
					// console.log("111");
					$(this).parent().next().html("*用户名不能为空");
				}
			})
		}
		function usernamefocus() {
			$("#username").focus(function () {
				$(this).parent().next().html("");
			})
		}

		function passwordsecondblur() {
			const pass_first=$("#pass_first").val();
			const pass_second=$("#pass_second").val();
			$("#pass_second").blur(function () {
				if (pass_second==''&&pass_first==''){

				}else if (pass_first!=pass_second){
					$(this).parent().next().html("*两次密码必须一样");
				}
			})

		}
		function passwordsec_firfocus() {
			$("#pass_first").focus(function () {
					$("#pass_first").parent().next().html("");
			})
			$("#pass_second").focus(function () {
					$(this).parent().next().html("");
			})

		}

		function sendmailfocus() {
			$("#email").focus(function () {
				$("#email").parent().next().html("");
			})

		}
		function mailpost() {
			const email=$("#email").val();
			const data={
				'email':email
			}
			const url="/register/sendmail"
			$.post(url,data,function (result) {
				console.log(result);
			})
		}
		function  sendMail() {
			var reg =/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
			$("#verify_refresh").click(function () {
				var wait=59;
				const email=$("#email").val();
				console.log("email"+email);
				if (email===''){
					console.log("111")
					$("#email").parent().next().html("*邮箱地址不能为空");
				}else if (!reg.test(email)){
					$("#email").parent().next().html("*邮箱格式不正确");

				}else {
					mailpost();
				var set=setInterval(function() {
					if (wait == 0) {
						$("#verify_refresh").attr("disabled",false);
						$("#verify_refresh").val("免费获取验证码");
						clearInterval(set);
					} else {
						$("#verify_refresh").attr("disabled", true);
						$("#verify_refresh").val(wait + "秒后可以重新发送");
					}
							wait--;
							console.log(wait);
						}, 1000)




				}
			})
		}
		function btnLogin() {
			var reg =/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
			const username=$("#username").val();
			const pass_first=$("#pass_first").val();
			const pass_second=$("#pass_second").val();
			const email=$("#email").val();
			const yzm=$("#yzm").val();
			if (username==''){
				$("#username").parent().next().html("*用户名不能为空");
			}else if (pass_first==''){
				$("#pass_first").parent().next().html("*密码不能为空");
			}else if (pass_second=='') {
				$("#pass_second").parent().next().html("*请先验证密码");
				// passwordsecondblur();
			}else if(pass_first!=pass_second){
				$("#pass_second").parent().next().html("*两次输入的密码不相同");
			}else if (email==''){
				$("#email").parent().next().html("*邮箱不能为空，请先验证邮箱");
			}else if (!reg.test(email)){
				$("#email").parent().next().html("*邮箱格式不正确");
			}
			else if (yzm==''){
				alert("请先输入验证码");
			}else{
				registerPost();
			}
		}
		function registerPost() {
			const username=$("#username").val();
			const pass_first=$("#pass_first").val();
			const email=$("#email").val();
			const yzm=$("#yzm").val();
			const url="/register/registerform";
			const  data={
				'username':username,
				"password":pass_first,
				"email":email,
				"yzm":yzm
			}
			$.post(url,data,function (result) {
				console.log(result);
				if (result.status===0){
					$("#error_content").html("抱歉:"+result.message);
					$("#error_modal").modal("show");
				}else {
					alert("注册成功")
					location.href="/login";
				}
			})
		}

	})
</script>